import {useEffect,useState} from 'react'
import { Row, Col,Affix,Divider,Spin } from 'antd';
import qs from 'querystring'
import axios from 'axios'
import {withRouter} from 'react-router-dom'
import User from '../../components/Blog/BlogDetail/User'
import MarkNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'
import marked from 'marked'
import hljs from 'highlight.js'
import store from '../../redux/store'
// import SupportUser from '../../components/Support/SupportUser'
import 'highlight.js/styles/monokai-sublime.css'
import './index.less'
import '../../assets/css/markdown.less'
// const { TextArea } = Input;

function Container(props){

  const [markDown,setMarkDown] = useState({})
  const [markDownNav,setMarkDownNav] = useState()
  const [loadingState,setLoadingState] = useState(true)
  const [user,setUser] = useState({})


  useEffect(()=>{
    
    
    let query = qs.parse(props.location.search.slice(1))
    console.log(query)
    if(query.id){
      getBlogDetail(query.id)
    }
    setUser(store.getState().user)
    // console.log(store.getState())
    // store.subscribe(()=>{
      
    // })
  },[props.location.search])
  const getBlogDetail = async (id)=>{
    let params = {}
    params.blogid = id
    let res = await axios.post('/api/client/blogDetail',params)
    if(res.code == 200){
      // console.log('before',res.result.detail)
      let str = res.result.detail.replace(/↵/gm, "\n")
      // console.log('str',str)
      setMarkDownNav(str)
      setMarkDown(marked(str))
      setLoadingState(false)
    }
    // console.log(res)
  }

  // console.log(props)
  

  

  const renderer = new marked.Renderer()
  marked.setOptions({
    renderer:renderer,
    gfm:true,
    pedantic:false, // 不保证完全正确，如果有错会帮我们修改一下
    sanitize:false, //忽略html  一般都不 
    tables:true,
    breaks:true,
    smartLists:false,
    highlight:function(code){
      return hljs.highlightAuto(code).value
    }
  })

  return (
    <div className='InnerContainer flex column'>
      <Spin tip="Loading..." spinning={loadingState}>
      <Row gutter={16}>
        <Col className="gutter-row article-item markdown" span={18}>
          <div className="blog-detail">
            <div className="cardBox " style={{padding:'10px 15px'}} dangerouslySetInnerHTML={{__html:markDown}}>
            </div>
          </div>
        </Col>
        <Col className="gutter-row" span={6}>
          <div className="right-data">
            <User user={user}/>
            {/* <div style={{marginTop:'10px'}}>
              <SupportUser />
            </div> */}
            {/* {tocify&&tocify.render()} */}
            <Affix offsetTop={5} style={{marginTop:'10px'}}>
            <div className="cardBox articles">
            <Divider>目录</Divider>
              
              <MarkNav
                className="article-menu"
                source={markDownNav}
                ordered={false}
              />
              
            </div>
            </Affix>
           
          </div>
        </Col>
      </Row>
      </Spin>
    </div>
  )
}

export default withRouter(Container)